<template>
	<view>
		<view class="top-box">
			<image class="top-bg" src="https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/vip-top-bg.png"></image>
			<view class="top-text-box">
				<view>
					<image style="width: 120rpx;height: 120rpx;border-radius: 50%;" :src="userinfo.headimg"></image>
				</view>
				<view style="padding-left: 20rpx;">
					<view style="display: flex;align-items: center;">
						<view style="font-size: 36rpx;font-weight: 600;color: #A0471A;">{{userinfo.nickname}}</view>
					</view>
					<view style="padding-top: 10rpx;color:  #A0471A;font-size: 26rpx;">您还未开通会员</view>

				</view>
			</view>
		</view>

		<view class="cont-box">
			<view style="font-size: 36rpx;color: #323232;font-weight: 600;">请选择开通会员的方式</view>
			<view style="padding-top: 10rpx;color:  #A0471A;font-size: 26rpx;">开通会员即可享受会员价</view>
		</view>
		
		<view class="card_imgBox">
			<view class="card_img">
				<view class="card_imgText">
					<view class="card_imgCards">开通会员卡</view>
					<view class="vip-but" style="color: #F24B00" @click="card()">立即开通</view>
				</view>
				<image src="../../../static/bgc01.png" mode="center"></image>
			</view>
			
			<view class="card_img">
				<view class="card_imgText">
					<view class="card_imgCards">充值成会员</view>
					<view class="vip-but" style="color: #F24B00" @click="chongzhi()">立即开通</view>
				</view>
				<image src="../../../static/bgc02.png" mode="center"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				vipArr: [],
				qyList: [
					// {text: '月卡150元 | 季卡：450元 | 年卡：1800元'},
					// {text: '春夏季日洗2件衣服，床品一周一套（不包 含内衣裤等）秋冬季日洗3件衣服'},
					// {text: '本卡仅限于洗衣用途，不能用于其它'},
					// {text: '本卡购买后不可退换'}
				],
				userinfo: '',
				store_id: '',
				base_domian: this.baseDomian,
				pop_data: '',
				data_key: 2
			}
		},
		onLoad() {
			this.store_id = uni.getStorageSync('store_id')
			this.getVipQuanyi()
		},
		onShow() {
			this.getUserInfo()
			this.getTaocan()
		},
		methods: {
			card(){
				uni.navigateTo({
					url:"/pages/vip/index"
				})
			},
			chongzhi(){
				uni.navigateTo({
					url:"/pages/user/wallet/chongzhi/index"
				})
			},
			//获取用户数据 		
			getUserInfo() {
				this.$ajaxRequest.get(this.baseUrl + 'user/info', {
					store_id: this.store_id
				}, true).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.userinfo = res.data.data
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 会员套餐列表
			getTaocan() {
				let that = this
				let arr = []
				this.$ajaxRequest.get(this.baseUrl + 'shop/recharge/card', {
					store_id: this.store_id
				}, true).then(res => {
					if (res.data.code == 200) {
						this.vipArr = res.data.data
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 会员权益
			getVipQuanyi() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/explain/info', {}, false).then(res => {
					if (res.data.code == 200) {
						this.qyList = res.data.data
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			quanyi(data_key) {
				this.data_key = data_key;
				this.$refs.popup.open()
			},
			buy(it) {
				uni.navigateTo({
					url: '/pages/vip/vipDetail/index?id=' + it.id
				})
			},
			close() {
				this.$refs.popup.close()
			}
		}

	}
</script>

<style>
	.vip-tips {
		position: absolute;
		bottom: 25rpx;
		display: flex;
		align-items: center;
		padding-top: 50rpx;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
		font-size: 20rpx;
	}

	.pop-box {
		position: relative;
	}

	.pop-img {
		width: 640rpx;
		height: 737rpx;
		/* height: 588rpx; */
	}

	.close-box {
		display: flex;
		justify-content: center;
		padding-top: 46rpx;
	}

	.close-img {
		width: 60rpx;
		height: 60rpx;
	}

	.pop-cont {
		position: absolute;
		top: 100rpx;
		left: 0;
		width: 100%;
		padding-left: 30rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
	}

	.pop-qy {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid #FBF8F9;
	}

	.qy-dot {
		top: 20rpx;
		width: 8rpx;
		height: 8rpx;
		background: rgba(255, 128, 62, 1);
		border-radius: 50%;
		margin-right: 25rpx;
		transform: translateY(15rpx);
	}

	.qy-text {
		width: 556rpx;
		/* font-size: 30rpx; */
		color: #575757;
	}

	/* .pop-box{
		padding-top: 30rpx;
		position: relative;
		width: 640rpx;
		height: 588rpx;
	} */
	.vip-but {
		width: 160rpx;
		height: 60rpx;
		background: linear-gradient(90deg, rgba(245, 213, 153, 1) 0%, rgba(253, 209, 125, 1) 100%);
		border-radius: 30rpx;
		color: #F24A00;
		/* padding: 5rpx 20rpx 5rpx 20rpx; */
		text-align: center;
		line-height: 60rpx;
		font-size: 26rpx;
		font-weight: 700;
		margin-top: 20rpx;
	}

	.vip-text-box {
		position: relative;
		width: 300rpx;
		height: 268rpx;
		overflow: hidden;
	}

	.vip-list {
		position: relative;
		margin-right: 20rpx;
		width: 500rpx;
		height: 268rpx;
	}

	.vip-bg {
		position: absolute;
		width: 500rpx;
		height: 268rpx;
	}

	.cont-box {
		padding: 20rpx 30rpx 20rpx 30rpx;
	}

	.top-box {
		position: relative;
		width: 750rpx;
		height: 322rpx;
	}

	.top-bg {
		position: absolute;
		width: 750rpx;
		height: 322rpx;
	}

	.top-text-box {
		display: flex;
		align-items: center;
		padding-top: 140rpx;
		padding-left: 58rpx;
		position: relative;
		z-index: 10;
	}
	.card_imgBox{
		display: flex;
		width: 98%;
		margin: 60rpx auto;
		justify-content: space-evenly;
	}
	.card_img{
		width: 45%;
		height: 200rpx;
		border-radius: 25rpx;
		overflow: hidden;
		position: relative;
	}
	.card_img image{
		width: 100%;
		height: 100%;
	}
	.card_imgText{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.card_imgCards{
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
	}
</style>
